<template>
	<component ref="componentRef" :is="table[props.type]" @sendState="sendState" @sendSelectValue="sendSelectValue" @sendSearchData="sendSearchData">
		<template v-for="name in Object.keys($slots)" #[name]="scope">
			<slot :name="name" v-bind="scope" />
		</template>
	</component>
</template>

<script lang="ts" setup>
const props = defineProps({
	type: {
		type: String,
		default: 'default',
	},
});
// 引入组件
const table: any = {
	default: defineAsyncComponent(() => import('./components/TableLayout/default.vue')),
	tabs: defineAsyncComponent(() => import('./components/TableLayout/tabLayout.vue')),
};
// 发送数据
const emits = defineEmits(['sendSelectValue', 'sendState', 'sendSearchData']);
const sendSelectValue = (value: any) => {
	emits('sendSelectValue', value);
};
// 发送state
const sendState = (value: any) => {
	emits('sendState', value);
};
// 发送搜索项
const sendSearchData = (value: any) => {
	emits('sendSearchData', value);
};
const componentRef = ref();
//获取数据
const getTableData = () => {
	componentRef.value.getTableData();
};
//搜索
const handleSearch = () => {
	componentRef.value.handleSearch();
};
//重置
const handleRest = () => {
	componentRef.value.handleRest();
};
//回显多选框选中的值
const setSelectValues = (selectValues: any) => {
	componentRef.value.setSelectValues(selectValues);
};

defineExpose({ getTableData, handleSearch, handleRest, setSelectValues, sendSearchData });
</script>

<style lang="scss" scoped></style>
